// src/web/static/js/list_video.js
const { createApp } = Vue;

createApp({
  data() {
    return {
      videos: [],
      loading: true,
      error: null
    };
  },
  methods: {
    getVideoUrl(video) {
      if (video.platform === 'youtube') {
        return `https://youtu.be/${video.video_id}`;
      } else if (video.platform === 'facebook') {
        return `https://www.facebook.com/video.php?v=${video.video_id}`;
      } else if (video.platform === 'discord') {
        const [guildId, channelId] = (video.video_id || '').split('/');
        return `https://discord.com/channels/${guildId}/${channelId}`;
      }
      return '#';
    }
  },
  mounted() {
    // 修改 src/web/static/js/list_video.js 中的 fetch 地址
fetch('/api/videos')  // ⬅️ 改成相对路径
    .then(res => res.json())
    .then(data => {
      this.videos = data.map(v => ({
        ...v,
        car_brand: v.extra_attributes?.car_brand || '-'
      }));
      this.loading = false;
    })
    .catch(err => {
      console.error(err);
      this.error = '❌ 加载视频源失败，请检查后端是否运行';
      this.loading = false;
    });
  }
}).mount('#app');